<!DOCTYPE HTML>
<?PHP
require ("config.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>¿Qué hacemos hoy?</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>  
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/jquery.scrolly.min.js"></script>
        <script src="js/jquery.onvisible.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <script src="js/eventos.js"></script>
        <!--datepicker-->
        <script src="js/jquery.js"></script>
        <script src="js/jquery.datetimepicker.js"></script>
        <!--datepicker-->
        <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-desktop.css" />
        <link rel="stylesheet" href="css/style-noscript.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <script language="javascript">
        window.onload = cargaDatosComboCategoría();
    </script>
    <body class="homepage">
        <!-- Header -->
        <div id="header" style="padding: 10% 0 0 0!important;">

            <!-- Nav -->    
            <nav id="nav">
                <ul>
                    <li><a href="index.php">Inicio</a></li>
                    <li>
                        <a href="categorias.php">Categorias</a>
                        
                    </li>
                    <li><a href="eventos.php">Buscar Evento</a></li>
                    <li><a href="#">Empresas</a>                       
                        <ul>
                            <li><a href="creaEmpresa.php">Registro Empresa</a></li>
                            <li><a href="creaEvento.php">Crear Evento</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Iniciar Sesi&oacute;n  &hellip;</a>
                        <ul>
                            <li><a href="login3.php">Empresas</a></li>
                            <li><a href="login3.php">Usuarios</a></li>

                        </ul>
                    </li>

                </ul>
            </nav>

            <div class="wrapper" style="padding: 0; width: 980px; margin: auto; border-radius: 8px; background: transparent; font-weight: 500;">
                <h1><a id="logo">Categorias</a></h1>
                <hr />

                
            <!-- Banner -->
            <section id="banner">
                <header>
                    <h2>Música</h2>
                </header>
                <h3>En la sección de música, podrás encontrar todos los eventos referentes a conciertos, chivos, 
                    eventos pagos y gratuitos, además de la información más relevante de estas actividades. </h3>
                
            </section>
            
            

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/blackSabbath.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/outThere.jpg"/></a>
                        
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/mars.jpg" alt="" /></a>
                    </article>
                </div>
            </section>
            
            
            <section id="banner">
                <header>
                    <h2>Cultural</h2>
                </header>
                <h3>
                    En el apartado cultural tienes la opción de hallar los eventos más destacados relativos a la cultura 
                    ya sea de nuestro país como las actividades para la celebración de la independencia, el encuentro de 
                    culturas, la anexión de Guanacaste, así como actividades asociadas a otras culturas como el Oktoberfest, 
                    Halloween y mucho más.
                </h3>
            </section>
            
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/bailesCulturales.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/fortin.jpg"/></a>
                        
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/zarcero.jpg" alt="" /></a>
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/oktober.jpg" alt="" /></a>
                    </article>
                    
                </div>
            </section>

            
            
            <section id="banner">
                <header>
                    <h2>Infantil</h2>
                </header>
                
                <h3>
                    En la sección infantil, serás capaz de encontrar las actividades para jóvenes menores de 18 años, niños de edades 
                    escolares e incluso menores, esto con el fin de encontrar actividades recreativas para los más pequeños y que puedan 
                    disfrutar de un espacio de sana diversión ya sea cerca del hogar o en otras ciudades.
                </h3>
                
                
            </section>

            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/kids1.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/kids2.jpg"/></a>
                        
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/kids3.jpg" alt="" /></a>
                    </article>
                    
                    
                    
                </div>
            </section>
            
            
            <section id="banner">
                <header>
                    <h2>Informativo</h2>

                </header>
                
                <h3>En el apartado  informativo podrás encontrar las secciones de eventos o actividades que no 
                    pueden ser categorizadas dentro de las otras clases de eventos preestablecidos en la página,  
                    ya sea porque es una mezcla de varias actividades de nuestra página o simplemente es un evento 
                    que se sale de los parámetros ya existentes. 
                </h3>
                
            </section>

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/informa1.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/informa2.jpg"/></a>
                        
                    </article>

                </div>
            </section>
            
            
            <section id="banner">
                <header>
                    <h2>Cine</h2>
                </header>
                <h3>
                    En esta sección encontrarás qué hay en la cartelera en este momento, las películas que se están 
                    estrenando y también verás lo que estrenará próximamente. Podés encontrar todos los cines de tu 
                    ciudad y sus funciones, así podés decidir a cuál función es a la que preferís asistir.
                </h3>
            </section>

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/cine1.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/cine2.jpg"/></a>
                        
                    </article>

                </div>
            </section>
            
            
            <section id="banner">
                <header>
                    <h2>Teatro</h2>
                </header>
                
                <h3>
                    En el apartado teatral tienes la posibilidad de encontrar los teatros más destacados en el país y 
                    encontrar los que se encuentran en tu ciudad, además podés encontrar todas las obras que estén siendo 
                    presentadas cada temporada y aquellas por estrenarse, también te permite enterarte de los horarios de 
                    presentaciones de cada uno de estos y su valor.
                </h3>
            </section>

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/teatro1.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/teatro2.jpg"/></a>
                        
                    </article>

                </div>
            </section>
            
            
            <section id="banner">
                <header>
                    <h2>Fiesta</h2>
                </header>
                
                <h3>
                    En la sección de fiestas podés encontrar las fiestas más destacadas que se están llevando a cabo en el país, 
                    cuáles están más cercanas a vos, y también te podrás entrar de aquellas que están por venir. En esta sección 
                    podrás encontrar  desde fiestas para que disfrutes en familia hasta aquellas para que disfrutes con amigos.
                </h3>
            </section>

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>
                        <a href="#event" class="image featured"><img src="images/party1.jpg" alt="" /></a>
                        
                    </article>
                    
                    <article>
                        <a href="#event" class="image featured"><img src="images/party2.jpg"/></a>
                        
                    </article>

                </div>
            </section>
        </div>
        <!-- Main -->

        <!-- Features -->

        <!-- Footer -->
        <div id="footer">
            <div class="container">
                <div class="row">

                </div>
            </div>
        </div>
    </body>
    <!--datepicker-->
    <script>
        $('#datetimepicker').datetimepicker({
            lang: 'de',
            i18n: {
                de: {
                    months: [
                        'Enero', 'Febrero', 'Marzo', 'Abril',
                        'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiemnbre', 'Octubre', 'Noviembre', 'Diciembre'
                    ],
                    dayOfWeek: [
                        "Dom", "Lun", "Mar", "Mie",
                        "Jue", "Vie", "Sab",
                    ]
                }
            },
            timepicker: true,
            format: 'd/m/Y H:i'
        });
    </script>
    <!--datepicker-->
</html>